<style>
    .xxpayPopupDiv .layui-form-label {
        width:120px !important;
        margin-left:1%;
    }
    .xxpayPopupDiv .layui-input-inline {
        width: 80% !important;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <div class="layui-tab-content">
                <form class="layui-form center">
                    <div class="layui-form-item">
                        <label class="layui-form-label">通道名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="passageName" id="passageName" placeholder="请输入通道名称" required lay-verify="required"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付接口</label>
                        <div class="layui-input-inline" >
                            <select name="ifCode" id="ifCode" lay-filter="ifCodeFilter">
                                <option value="">选择支付接口</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">手续费类型</label>
                        <div class="layui-input-inline" >
                            <input type="radio" name="feeType" value="1" title="百分比收费" lay-filter="feeTypeFilter" checked="checked">
                            <input type="radio" name="feeType" value="2" title="固定收费" lay-filter="feeTypeFilter" >
                            <input type="radio" name="feeType" value="3" title="百分比收费+固定收费" lay-filter="feeTypeFilter">
                        </div>
                    </div>
                    <div class="layui-form-item" id="feeRateId" style="display: block">
                        <label class="layui-form-label">手续费费率(%)</label>
                        <div class="layui-input-inline">
                            <input type="tel" id="feeRate" name="feeRate" placeholder="输入手续费费率" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" id="feeEveryId" style="display: none">
                        <label class="layui-form-label">每笔手续费(元)</label>
                        <div class="layui-input-inline">
                            <input type="tel" id="feeEvery" name="feeEvery" placeholder="输入每笔手续费" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">参数配置方式</label>
                        <div class="layui-input-inline" id="configTypeDiv" >
                            <p style="margin-top: 7px;color: red;">请选择支付接口</p>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">通道状态</label>
                        <div class="layui-input-inline" >
                            <input type="radio" name="status" title="开启" value="1" checked />
                            <input type="radio" name="status" title="关闭" value="0" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注信息</label>
                        <div class="layui-input-inline">
                            <input type="text" name="remark" placeholder="请输入备注信息" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <button type="button" class="layui-hide xxpayYesBtn" lay-submit="" lay-filter="add">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form','table','util','admin',],function(){
        var form = layui.form
        , $ = layui.$
        , admin = layui.admin
        , layer = layui.layer
        , element = layui.element
        , table = layui.table;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息

        var allPayInterfaceType = {};


        // 加载支付接口类型
        admin.req({
            type: 'post',
            url: layui.setter.baseUrl + '/config/common/pay_interface_type_all',
            error: function (err) {
                layer.alert(err);
            },
            success: function (resIfType) {
                if (resIfType.code == 0) {

                    $.each(resIfType.data, function () {
                        allPayInterfaceType[this.ifTypeCode] = this;
                    });

                    // 加载支接口
                    admin.req({
                        type: 'post',
                        url: layui.setter.baseUrl + '/config/common/pay_interface_all',
                        error: function(err){
                            layer.alert(err);
                        },
                        success: function(res){
                            if(res.code == 0){
                                var ifList = res.data;
                                //遍历赋值
                                for(var i in ifList){
                                    $("#ifCode").append('<option ifTypeCode="' +ifList[i].ifTypeCode+'" value= '+ifList[i].ifCode+'>'+ '[' +ifList[i].ifCode + '] ' + ifList[i].ifName+'</option>');
                                }
                                form.render('select');
                            }
                        }
                    });

                }
            }
        });

        form.render();

        // 当点击微信渠道配置按钮保存的时候
        form.on('submit(add)', function(data){

            if(!data.field.configType){
                layer.alert("请选择参数配置方式！");
                return false;
            }

            admin.req({
                type: 'post',
                url: layui.setter.baseUrl + '/config/agentpay_passage/add', //模拟接口
                data: data.field,
                error: function(err){
                    layer.alert(err.msg,{title:"请求失败"})
                },
                success: function(res){
                    if(res.code == 0){
                        layer.alert(res.msg, {title: '保存成功'},function(index){
                            layer.closeAll(); //关闭所有弹层
                            layui.table.reload('tableReload', {page: {curr: 1}}); //调用业务弹层外表格重新加载
                        });
                    }
                }
            })
        });

        form.on('radio(feeTypeFilter)', function(data){
            if(data.value == 1) {
                $("#feeRateId").show();
                $("#feeEveryId").hide();
            }else if(data.value == 2) {
                $("#feeRateId").hide();
                $("#feeEveryId").show();
            }else if(data.value == 3) {
                $("#feeRateId").show();
                $("#feeEveryId").show();
            }
        });

        form.on("select(ifCodeFilter)", function(data){

            let ifTypeCode = $(data.elem).find('option[value="'+data.value+'"]').attr('ifTypeCode');
            let supportConfigType = allPayInterfaceType[ifTypeCode].supportConfigType;

            if(supportConfigType){

                let _html = "";

                $.each(supportConfigType.split(","), function(){

                    if(this == '1'){
                        _html += `<input type="radio" name="configType" title="内置参数" value="1" />`;
                    }
                    if(this == '2'){
                        _html += `<input type="radio" name="configType" title="转卡通道银行卡" value="2" />`;
                    }
                });

                $("#configTypeDiv").html(_html);

            }else{

                $("#configTypeDiv").html(`<p style="margin-top: 7px;color: red;">请选择支付接口</p>`);
            }

            if($("#configTypeDiv input[name='configType']").length == 1){ //如果仅包含一个则默认选中
                $("#configTypeDiv input[name='configType']").prop('checked', true);
            }

            form.render();

        });


    })
</script>
